<template>
  <div id="app">
    <router-view />
    <div
      class="tabbar"
      v-show="$route.meta.navShow"
    >
      <router-link
        to="/auditingWait"
        class="item"
      >
        <icon-svg
          icon-class="news"
          className="icon"
        />
        <p>待审批</p>
      </router-link>
      <router-link
        to="/auditingComplete"
        class="item"
      >
        <icon-svg
          icon-class="approval"
          className="icon"
        />
        <p>已审批</p>
      </router-link>
      <!-- <router-link
        to="/auditingLaunch"
        class="item"
      >
        <icon-svg
          icon-class="send"
          className="icon"
        />
        <p>我发起</p>
      </router-link> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component({
  components: {
  },
})
export default class App extends Vue {
  get selected() {
    return this.$store.state.document.billType;
  }

  set selected(val: string) {
    this.$store.dispatch('setBillType', val);
    this.$router.push(val);
  }
}
</script>
<style>
html {
  /* 1rem = 100px 屏幕宽度是750px */
  font-size: 13.3333333333333vmin;
  width: 100vw;
  overflow-x: hidden;
  background-color: #fff;
  color: #333;
  padding: 0;
  margin: 0;
}
body {
  font-size: 14px;
  margin: 0;
  padding: 0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

<style lang="scss" scoped>
#app {
  .tabbar {
    position: fixed;
    bottom: 0;
    width: 100vw;
    background: #fafafa;
    font-size: 0.24rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #ddd;
    .item {
      flex: 1 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #333;
      padding: 0.1rem 0;
      text-decoration: none;
      &.router-link-active {
        color: #26a2ff;
        background: #fafafa;
      }
      .icon {
        width: 0.36rem;
      }
    }
  }
  .seizASeat {
    height: 55px;
  }
}
</style>
